<template>
    <div ref="aiEditorRef" class="ai-editor">
     
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import 'aieditor/dist/style.css';

const aiEditorRef = ref();
let aiEditor = null;
const props = defineProps({
  placeholder: {
    type: String,
    default: '点击输入内容...',
  },
  content: {
    type: String,
    default: 'AiEditor 是一个面向 AI 的开源富文本编辑器。',
  },
})

onMounted(() => {
  // 动态导入 AIEditor 以确保在客户端加载
  import('aieditor').then(({ AiEditor }) => {
    aiEditor = new AiEditor({
      element: aiEditorRef.value,
      placeholder: props.placeholder,
      content: props.content,
      theme: 'light',
      // undo: 撤销
      // redo: 重做
      // brush: 格式刷
      // eraser: 清除格式
      // heading: 正文/标题
      // font-family: 字体
      // font-size: 字号
      // bold: 加粗
      // italic: 斜体
      // underline: 下划线
      // strike: 删除线
      // link: 链接
      // code: 行内代码
      // subscript: 下标
      // superscript: 上标
      // hr: 分割线
      // todo: 任务列表
      // emoji: 表情
      // highlight: 高亮
      // font-color: 字体颜色
      // align: 对齐
      // line-height: 行高
      // bullet-list: 无序列表
      // ordered-list: 有序列表
      // indent-decrease: 减少缩进
      // indent-increase: 增加缩进
      // break: 强制换行
      // image: 图片
      // video: 视频
      // attachment: 附件
      // quote: 引用
      // container: 高亮块
      // code-block: 代码块
      // table: 表格
      // source-code: 源代码
      // printer: 打印
      // fullscreen: 全屏
      // ai: 人工智能
      toolbarKeys: [],
    });
    // 监听 content 属性的变化
    watch(() => props.content, (newContent) => {
      if (aiEditor) {
        aiEditor.setContent(newContent);
      }
    });
  });
});

onUnmounted(() => {
  if (aiEditor) {
    aiEditor.destroy();
  }
});
</script>
<style scoped lang="stylus">
.ai-editor
  width 100%
  height 100%
</style>